<!--  -->
<template>
  <div>{{ props.id }}周计划
    {{ tableData }}

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="" width="180">
        <template #default="scope">
          {{ `${scope.row.time < 13 ? '上午' : '下午'}${scope.row.time}时` }} </template>
      </el-table-column>

      <el-table-column v-for="item in weeks" align="center" :label="item">
        <template #default="scope">
            
             <TaskColumn :taskList="scope.row[item]"></TaskColumn>

          </template>
      </el-table-column>
 

    </el-table>
  </div>
</template>

<script lang='ts' setup>
import { time } from 'echarts';
import { reactive, toRefs, ref, onMounted } from 'vue'

import { getElderlyTask } from '../../apis/elderly/elderly';
import { dayjs } from 'element-plus';
import TaskColumn from './TaskColumn.vue';
const props = defineProps<{
  id: number
}>()


const weeks = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]

let tableData: any = ref([]);

const getData = async () => {


  const res = await getElderlyTask(props.id);

  let list = res.data.list;
  console.log("周循环数据", list);

  let yyyymmdd = dayjs().format("YYYY-MM-DD");


  for (let i = 0; i < 24; i++) {
    let data: Record<string, any> = {
      time: i,
    }
    weeks.forEach(item => {
      data[item] = list.filter(task => task.type == '周循环' && task.week == item && dayjs(yyyymmdd + " " + task.startTime).hour() == i);
    })

    tableData.value.push(data)

  }

  console.log('list', list)
}
getData();
</script>
<style scoped lang="less">


:deep .el-table .el-table__cell {
    padding: 0 !important;
    position: static !important;

}

:deep .el-table .cell {
    overflow: visible !important;
}
</style>